<template>
  <form action="#" style="margin: 20px;">
    <p @click="tag" :style="{ width: w, height: h, backgroundColor: bgc }"></p>
  </form>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      h: "200px",
      w: "200px",
      bgc: "cyan",
    });
    let num = 0;
    const tag = () => {

      num += 1;
      if (num == 1) {
        state.bgc = "pink";
      } else {
        if (num == 2) {
          state.bgc = "green";
        } else {
          state.bgc = "cyan";
          num = 0;
        }
      }
    };
    return {
      ...toRefs(state),
      tag,
    };
  },
};
</script>
